<div class="text-black border-gray-150 p-4 flex border-t">
  <div class="flex-1 flex space-x-4 w-full">
    <% if avatar.present? %>
      <div class="relative aspect-square w-10 h-10 overflow-hidden rounded shrink-0">
        <%= image_tag helpers.main_app.url_for(avatar), class: "object-cover min-w-full min-h-full h-full" %>
      </div>
    <% end %>
    <div class="flex flex-col pr-3 min-w-0">
      <div class="font-medium text-ellipsis overflow-hidden">
        <%= name %>
      </div>
      <% if title.present? %>
        <div class="text-xs text-gray-500 uppercase">
          <%= title %>
        </div>
      <% end %>
    </div>
  </div>
  <div class="relative" data-controller="toggle">
    <a class="flex items-center h-full cursor-pointer" data-control="profile-dots" data-action="click->toggle#togglePanel">
      <%= helpers.svg "avo/three-dots", class: 'h-4' %>
    </a>
    <div
      class="hidden absolute flex flex-col inset-auto right-0 bottom-0 mb-8 bg-white rounded min-w-[200px] shadow-context z-40"
      data-toggle-target="panel"
      data-transition-enter="transition ease-in-out duration-100"
      data-transition-enter-start="transform opacity-0 translate-y-3"
      data-transition-enter-end="transform opacity-100 translate-y-0"
      data-transition-leave="transition ease-in duration-75"
      data-transition-leave-start="transform opacity-100 translate-y-0"
      data-transition-leave-end="transform opacity-0 translate-y-3"
    >
      <% if Avo.plugin_manager.installed?("avo-menu") && Avo.has_profile_menu? %>
        <div class="text-black space-y-4">
          <% Avo.profile_menu.items.each do |item| %>
            <% if item.is_a? Avo::Menu::Link %>
              <%= render Avo::ProfileItemComponent.new label: item.name, path: item.path, icon: item.icon, method: item.method, params: item.params %>
            <% end %>
          <% end %>
        </div>
      <% end %>
      <%= render "avo/partials/profile_menu_extra" %>
      <% if can_sign_out_user? %>
        <%= form_with url: helpers.main_app.send(sign_out_path),
          method: sign_out_method,
          data: {
            controller: :"sign-out",
            sign_out_confirm_value: t('avo.are_you_sure'),
            action: "submit->sign-out#handle",
          },
          class: 'flex-1' do |form| %>
          <%= form.button turbo_confirm: t('avo.are_you_sure'), class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-red-600 font-semibold hover:bg-red-100 block px-4 py-1 w-full py-3 text-center rounded w-full" do %>
          <%= helpers.svg "avo/logout", class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
          <% end %>
        <% end %>
      <% end %>
    </div>
  </div>
</div>
